<!doctype html>
<!--[if lt IE 7]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html xmlns:th="http://www.thymeleaf.org" lang="en-US"> <!--<![endif]-->

<span th:substituteby="layout.html :: header-include"></span>

<body>
    <span th:substituteby="layout.html :: header"></span>

    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span8 page-content">
                    <article class="type-page hentry clearfix">
                        <h1 class="post-title">
                            <a href="#">New Article</a>
                        </h1>
                        <hr/>
                        <p>Please input article info to create new one. If you have problem, please contact support team</p>
                    </article>

                    <form id="contact-form" th:action="@{/process-new-article.html}" th:object="${article}" class="row" method="post">

                        <div class="span2">
                            <label for="name">Name</label>
                        </div>
                        <div class="span6">
                            <input type="text" name="name" id="name" class="required input-xlarge"
                                   title="* Please provide a valid name"/>
                        </div>

                        <div class="span2">
                            <label for="name">Path</label>
                        </div>
                        <div class="span6">
                            <input type="text" name="path" id="path" class="required input-xlarge"
                                   title="* Please provide a valid path"/>
                        </div>

                        <div class="span2">
                            <label for="name">Lyric</label>
                        </div>
                        <div class="span6">
                            <input type="file" name="lyric" id="lyric" class="required input-xlarge"
                                   title="* Please provide a valid path"/>
                        </div>

                        <div class="span6 offset2 bm30">
                            <input type="submit" name="submit" value="Submit" class="btn btn-inverse"/>
                            <img src="/images/loading.gif" id="contact-loader" alt="Loading..."/>
                        </div>

                        <div class="span6 offset2 error-container"></div>
                        <div class="span8 offset2" id="message-sent"></div>
                    </form>
                </div>
                <span th:substituteby="layout.html :: sidebar"></span>
            </div>
        </div>
    </div>

    <span th:substituteby="layout.html :: footer"></span>
</body>
</html>
